<template>
    <div class="parent">
        <header class="header">
            <x-header class="headerContent" :left-options="{backText: ''}"><span class="title">{{title}}</span></x-header>
        </header>
        <scroller lock-x  @on-scroll="onScroll" ref="scrollerEvent">
        <div class="content">
            <div class="title">
                <span>{{datalist.articleTitle}}</span>
            </div>
            <div class="title_bottom">
                <span class="author">作者:{{datalist.author}}</span>
                <span class="articleSource">来源:{{datalist.articleSource}}</span>
                <span>{{datalist.createTime}}</span>
            </div>
            <div class="detailContent">
               <div v-html="datalist.content"></div>
            </div>
        </div>
        </scroller>
    </div>
</template>
<script>
import { XHeader, Scroller } from 'vux'
export default {
    name: 'noticeDetail',
    data () {
        return {
            datalist: null,
            dm: null,
            title: null,
            scrollTop: 0
        }
    },
    components: {
        XHeader,
        Scroller
    },
    created () {
        this.datalist = this.$route.query.item
        this.title = this.$route.query.mc
    },
    mounted () {
        this.$nextTick(() => {
            this.$refs.scrollerEvent.reset({top: 0})
        })
    },
    methods: {
         onScroll (pos) {
            this.scrollTop = pos.top
        },
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
    height: 100%;
    background: #fff;
}
.header{
    width: 100%;
}
.title{
    font-size: 16px;
    font-family:ArialMT;
    color:rgba(255,255,255,1);
    line-height:18px;
    letter-spacing:1px;
}
.headerContent{
    width: 100%;
    background:linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.content{
    width: 100%;
    // padding: 0 38px;
    // height: 6.666667rem;
    flex: 1;
    padding: 0 .506667rem;
    padding-bottom: 1.333333rem;
    overflow:hidden;
    .title{
        width: 100%;
        height: .533333rem;
        margin-top: .333333rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(82,82,82,1);
        line-height:20px;
        letter-spacing:1px;
        span{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
    }
    .title_bottom{
        width: 100%;
        height: 30px;
        font-size:10px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(151,151,151,1);
        line-height:14px;
        letter-spacing:1px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .author{
            padding-right: .133333rem;
        }
        .articleSource{
            padding-right: .266667rem;
        }
    }
    .detailContent{
        margin-top: .8rem;
        width: 100%;
        font-size:12px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(151,151,151,1);
        line-height:17px;
    }
}

</style>
